<template>
    <div>
        <span class="weui-switch" :class="{'weui-switch-on' : isChecked==textVal[0]}" :value="value" @click="toggle" style="position:relative">
            <div v-if="isChecked==textVal[0] && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 9px;line-height:22px;color:#FFF;user-select:none;text-align: left;font-size:12px">
                {{direction[0]}}
            </div>
            <div v-if="isChecked==textVal[1] && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none;font-size:12px">
                {{direction[1]}}
            </div>
        </span>
    </div>
</template>
<script>
    export default {
        name: 'switchComponent',
        props: {
          value: [String, Number],
          text: {
              type: String,
              default: ''
          },
          textValue: {
              type: String,
              default: ''
          },
          id: [String, Number],
          permission:{
              type: Boolean,
              default: true
          },
        },
        data () {
            return {
                isChecked: this.value
            }
        },
        computed: {
            direction () {
                if (this.text) {
                    return this.text.split('|')
                } else {
                    return []
                }
            },
            textVal() {
                if (this.textValue) {
                    return this.textValue.split('|')
                } else {
                    return []
                }
            }
        },
        watch: {
          value (val) {
            this.isChecked = val
          },
          isChecked(val) {
            this.$emit('change', val);
          }
        },
        methods: {
          toggle() {
            if(this.permission){
              this.isChecked = (this.isChecked==this.textVal[0]?this.textVal[1]:this.textVal[0]);
              this.$emit('update:value', this.isChecked);
              this.$emit('changeStatus', this.id,this.isChecked);
            }else{
              this.$message.error('没有权限,请联系管理员')
            }

          }
        }
    }
</script>
<style>
    .weui-switch {
        display: block;
        position: relative;
        width: 62px;
        height: 24px;
        border: 1px solid #DFDFDF;
        outline: 0;
        border-radius: 16px;
        box-sizing: border-box;
        background-color: #DFDFDF;
        transition: background-color 0.1s, border 0.1s;
        cursor: pointer;
      }
      .weui-switch:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;

        width: 60px;
        height: 22px;
        border-radius: 15px;
        background-color: #FDFDFD;
        transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
      }
      .weui-switch:after {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 15px;
        background-color: #FFFFFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
      }
      .weui-switch-on {
        border-color: #61997A;
        background-color: #1AAD19;
      }
      .weui-switch-on:before {
        border-color: #61997A;
        background-color: #61997A;
      }
      .weui-switch-on:after {
        transform: translateX(38px);
      }
</style>
